<html>
<head>
	<script language="javascript" src="js/jquery.min.js"></script>
	<script language="javascript" src="js/ui/ui.core.js"></script>
	<script language="javascript" src="js/ui/ui.resizable.js"></script>	

	<script language="javascript" src="js/jquery.mousewheel.min.js"></script>
	<script language="javascript" src="js/jquery.imgareaselect.min.js"></script>
	
	<script language="javascript" src="../js/on/jquery.onviewport.js"></script>
	<script language="javascript" src="../js/on/jquery.onimage.tools.js"></script>
	<script language="javascript" src="../js/on/jquery.onimage.js"></script>	
	
	<link rel="stylesheet" href="css/imgareaselect/imgareaselect-animated.css"/>
	<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.7.2.custom.css"/>	
	<link rel="stylesheet" href="../css/onimage/jquery.onimage.css"/>	
	
	
	<style>
	
		ul,li {			
			
		}
		
		ul {
			list-style: none;
			margin:0;
			padding: 0;
		
		}
		
		ul.subtasks {
			float: left;
			clear: both;			
		}
		
		ul.dependent {
			float: left;
		}
			
		li {
			border: 1px solid blue;			
			float: left;
			padding: 8px;
			/*clear: both;*/
		}
		
		li span {
			float: left;
		}

		.tasklist {
			width: 8000px;
			overflow: visible;
			position: absolute;
		}
			
	</style>
	
</head>

<body>

<div class="tasklist">
<ul>
	<li>	
		<span>Project</span>		

		<ul class="subtasks">
			<li>
				<span>Subtask1_1</span>
				<ul class="subtasks">
					<li>
						<span>Subtask1_1_1</span>
					</li>					
					<li>
						<span>Subtask1_1_2</span>
					</li>					
				</ul>
			</li>					
			<li>
				<span>Subtask1_2</span>
			</li>					
		</ul>
		<ul class="dependent">
			<li>
				<span>Task2</span>
			</li>
			<li>
				<span>Task3</span>
			</li>
			<li>
				<span>Task4</span>
				
				<ul class="subtasks">
					<li>
						<span>Subtask1_1</span>
						<ul class="subtasks">
							<li>
								<span>Subtask1_1_1</span>
							</li>					
							<li>
								<span>Subtask1_1_2</span>
							</li>					
						</ul>
					</li>					
					<li>
						<span>Subtask1_2</span>
					</li>					
				</ul>

		
			</li>
			<li>
				<span>Task4</span>
				
				<ul class="subtasks">
					<li>
						<span>Subtask1_1</span>
						<ul class="subtasks">
							<li>
								<span>Subtask1_1_1</span>
							</li>					
							<li>
								<span>Subtask1_1_2</span>
							</li>					
						</ul>
					</li>					
					<li>
						<span>Subtask1_2</span>
					</li>					
				</ul>

		
			</li>
		<ul>			
		
	</li>
	
</ul>
</div>

<script>
	$('.tasklist li').resizable({
		handles: 'e'
	});
</script>


</body>
</html>